<template>
  <div class="index">
    <div class="Indexleft">
      <div class="title">{{ titles ? "MALL4J建站后台" : "MALL4J" }}</div>
      <a-menu
        :default-selected-keys="['1']"
        :default-open-keys="['sub1']"
        mode="inline"
        theme="dark"
        :inline-collapsed="collapsed"
      >
        <a-menu-item key="1">
          <a-icon type="home" />
          <span><router-link to="/index/home">首页</router-link></span>
        </a-menu-item>
        <a-sub-menu key="sub1">
          <span slot="title"
            ><a-icon type="bar-chart" /><span>数据报表</span></span
          >
          <a-menu-item key="2">
            <router-link to="/index/dataday">数据日统计</router-link>
          </a-menu-item>
          <a-menu-item key="3">
            <router-link to="/index/datamonth">数据月统计</router-link>
          </a-menu-item>
        </a-sub-menu>
        <a-sub-menu key="sub2">
          <span slot="title"><a-icon type="user" /><span>产品管理</span></span>
          <a-menu-item key="4">
            <router-link to="/index/grouping">分组管理</router-link>
          </a-menu-item>
          <a-menu-item key="5">
            <router-link to="/index/classify">分类管理</router-link>
          </a-menu-item>
          <a-menu-item key="6">
            <router-link to="/index/warehouse">仓库产品管理</router-link>
          </a-menu-item>
          <a-menu-item key="7">
            <router-link to="/index/product">产品管理</router-link>
          </a-menu-item>
          <a-menu-item key="8">
            <router-link to="/index/comment">评论管理</router-link>
          </a-menu-item>
          <a-menu-item key="9">
            <router-link to="/index/Warehouse">规格管理</router-link>
          </a-menu-item>
        </a-sub-menu>

        <a-sub-menu key="sub3">
          <span slot="title"><a-icon type="team" /><span>会员管理</span></span>
          <a-menu-item key="10">
            <router-link to="/index/Three">312</router-link>
          </a-menu-item>
          <a-menu-item key="11">
            <router-link to="/index/Membermanagement">会员管理</router-link>
          </a-menu-item>
          <a-menu-item key="12">
            <router-link to="/index/Client">客户目录</router-link>
          </a-menu-item>
        </a-sub-menu>
        <a-sub-menu key="sub4">
          <span slot="title"><a-icon type="bank" /><span>门店管理</span></span>
          <a-menu-item key="13">
            <router-link to="/index/search">热搜管理</router-link>
          </a-menu-item>
          <a-menu-item key="14">
            <router-link to="/index/notice">公告管理</router-link>
          </a-menu-item>
          <a-menu-item key="15">
            <router-link to="/index/slideshow">轮播图管理</router-link>
          </a-menu-item>
          <a-menu-item key="16">
            <router-link to="/index/self">自提点管理</router-link>
          </a-menu-item>
          <a-menu-item key="17">
            <router-link to="/index/freight">运费模板</router-link>
          </a-menu-item>
        </a-sub-menu>

        <a-sub-menu key="sub5">
          <span slot="title"
            ><a-icon type="container" /><span>订单管理</span></span
          >
          <a-menu-item key="18">
            <router-link to="/index/order">订单管理</router-link>
          </a-menu-item>
        </a-sub-menu>
        <a-sub-menu key="sub6">
          <span slot="title">
            <a-icon type="setting" theme="filled" /> <span>系统管理</span></span
          >
          <a-menu-item key="19">
            <router-link to="/index/Site">地址管理</router-link>
          </a-menu-item>
          <a-menu-item key="20">
            <router-link to="/index/Administrator">管理员列表</router-link>
          </a-menu-item>
          <a-menu-item key="21">
            <router-link to="/index/Role">角色管理</router-link>
          </a-menu-item>
          <a-menu-item key="22">
            <router-link to="/index/Menu">菜单管理</router-link>
          </a-menu-item>
          <a-menu-item key="23">
            <router-link to="/index/Timing">定时任务</router-link>
          </a-menu-item>
          <a-menu-item key="24">
            <router-link to="/index/Parameter">参数管理</router-link>
          </a-menu-item>
          <a-menu-item key="25">
            <router-link to="/index/MenSystemlogu">系统日志</router-link>
          </a-menu-item>
        </a-sub-menu>
      </a-menu>
    </div>

    <main>
      <div class="indexHead">
        <a-icon
          @click="toggleCollapsed"
          :type="collapsed ? 'menu-unfold' : 'menu-fold'"
        />
      </div>

      <div class="indexContent">
        <router-view></router-view>
      </div>
    </main>
  </div>
</template>

<script>
export default {
  data() {
    return {
      collapsed: false,
      titles: true,
    };
  },
  methods: {
    toggleCollapsed() {
      this.collapsed = !this.collapsed;
      this.titles = !this.titles;
    },
  },
};
</script>
<style lang="scss">
.indexHead {
  width: 100%;
  background: #fff;
  i {
    background-color: #fff;
    color: #000;
    padding: 15px 15px;
  }
}
.indexContent {
  width: 98%;
  margin: 1% 1%;
  background: #fff;
}
.index {
  display: flex;
}
.Indexleft {
  height: 93.2%;
  ul {
    height: 100%;
    overflow-y: auto;
    li {
      width: 256px;
    }
  }
}
a {
  color: rgba(226, 226, 226, 0.65);
  width: 100%;
  height: 100%;
}
main {
  flex: 1;
}
.title {
  font-size: 20px;
  font-weight: bold;
  padding: 15px 0px;
  text-align: center;
  color: #fff;
  background: #1890ff;
}
</style>
